<template>
  <el-container class="app-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" class="app-aside">
      <div class="logo"><img style="width: 40px; height: 40px" src="../assets/image/logo.png" />NoteWave</div>
      <side-menu />
    </el-aside>

    <!-- 右侧主区域 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <header-bar />
      </el-header>

      <!-- 内容区域 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>

</template>

<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
import SideMenu from '../components/SideMenu.vue'
import HeaderBar from '../components/HeaderBar.vue'

import { ref } from 'vue'

const isCollapse = ref(false)
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

//import { computed } from 'vue'
//import { useRoute } from 'vue-router'
//import MainLayout from './MainLayout.vue'
//import EmptyLayout from './EmptyLayout.vue'

// const route = useRoute()
// const layoutComponent = computed(() => {
//   return route.meta.layout === 'empty' ? EmptyLayout : MainLayout
// })

</script>

<style scoped>
/*
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}*/

.app-container {
  height: 100vh;
}
.app-aside {
  background-color: #262626;
  color: white;
  transition: width 0.3s;
}
.app-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
}
.app-main {
  background-color: #f0f2f5;
  padding: 20px;
}
.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
